<style lang="scss">
.page-tabs {
  font-size: 14px;
  //.theme {
  //  --spectrum-tabs-textonly-tabitem-selection-indicator-background-color-selected: var(--el-color-primary);
  //  --spectrum-tabs-quiet-textonly-divider-background-color: var(--el-color-primary);
  //  --spectrum-tabs-quiet-textonly-tabitem-height: 50px;
  //  --spectrum-tabs-quiet-textonly-divider-size: 1px;
  //  sp-tab {
  //    padding: 0;
  //  }
  //}

  .z-tabs-ani {
    &.z-tabs sp-tab[selected] {
      border-color: transparent;
    }

    &.z-tabs sp-tab:hover {
      border-color: transparent;
    }


    &.z-tabs::part(selection-indicator) {
      //height: 5px;
      bottom: 0;

      position: absolute;

      transition: transform .5s ease;
      &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        //width: calc(100% + 1px);
        width: 100%;
        transform: translateX(.05px);
        height: 3px;
        background-color: #3ba2f4;
      }
    }
  }

}
</style>

<template>
  <div class="page-tabs">

     <z-space vertical>
       <zw-tabs class="z-tabs" :selected="selectedVal" >
         <sp-tab label="Tab 1" value="1"></sp-tab>
         <sp-tab label="Tab 2" value="2"></sp-tab>
         <sp-tab label="Tab 3" value="3"></sp-tab>
         <sp-tab label="Tab 4" value="4"></sp-tab>
         <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
         <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
         <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
         <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>Z
       </zw-tabs>

<!--       <zw-tabs class="z-tabs z-tabs-ani" :selected="selectedVal" >-->
<!--         <sp-tab label="Tab 1" value="1"></sp-tab>-->
<!--         <sp-tab label="Tab 2" value="2"></sp-tab>-->
<!--         <sp-tab label="Tab 3" value="3"></sp-tab>-->
<!--         <sp-tab label="Tab 4" value="4"></sp-tab>-->
<!--         <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>-->
<!--         <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>-->
<!--         <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>-->
<!--         <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>-->
<!--       </zw-tabs>-->

       <vue-code-mirror :tpl="doc.d1"></vue-code-mirror>

       <zw-tabs class="z-tabs" selected="1" >
          <z-tab-pane index="1">
            <template #label="scope">Tab1</template>
            Content for Tab 1 <el-button>11</el-button>
          </z-tab-pane>
         <z-tab-pane index="2">
           <template #label="scope">Tab2</template>
         Content for Tab 2
         </z-tab-pane>
<!--          <z-tab-pane :label="'Tab' + i" :key="i" :index="i + ''" v-for="i in tabArr">Content for Tab {{i}}</z-tab-pane>-->

       </zw-tabs>

       <p>z-tab-pane 简化代码</p>

       <vue-code-mirror :tpl="doc.d2"></vue-code-mirror>


       <p>简单tab manager</p>
       <zw-tabs class="z-tabs" :selected="arrTool.state.current" @change="arrTool.handleChange" >
          <z-tab-pane  :key="i" :index="i"
                      v-for="i in arrTool.state.keys">Content for Tab {{i}}
            <template #label="scope">Tab{{i}}
              <i style="width: 20px; height: 14px; text-align: center;"
                 zw-tabs-prevent
                 @mousedown.stop="delTab(i)" class="el-icon-close"></i>
            </template>
          </z-tab-pane>
       </zw-tabs>

       <div>
         <el-button @click="addTab">添加tab</el-button>
         <el-button @click="rmLastTab">删除最后一个tab</el-button>
       </div>

       <vue-code-mirror :js="doc.d3"></vue-code-mirror>

     </z-space>
  </div>
</template>

<script>
import VueCodeMirror from "@example/components/VueCodeMirror";
import {useArrTool} from "../../../babel-static/hooks";

export default {
  components: {VueCodeMirror},
  data() {
    return {
      tabArr: [
          '2','3'
      ],
      selectedVal: '1',
      doc: {
        d1: `
<zw-tabs class="z-tabs" :selected="1" >
  <sp-tab label="Tab 1" value="1"></sp-tab>
  <sp-tab label="Tab 2" value="2"></sp-tab>
  <sp-tab label="Tab 3" value="3"></sp-tab>
  <sp-tab label="Tab 4" value="4"></sp-tab>
  <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
  <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
  <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
  <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</zw-tabs>
`,
        d2: `
       <zw-tabs class="z-tabs" selected="1" >
          <z-tab-pane index="1">
            <template #label="scope">Tab1</template>
            Content for Tab 1 <el-button>11</el-button>
          </z-tab-pane>
         <z-tab-pane index="2">
           <template #label="scope">Tab2</template>
         Content for Tab 2
         </z-tab-pane>
       </zw-tabs>
        `,
        d3: `
import  {useArrTool} from 'pkg-exms/lib/hooks.js'

    let arrTool = useArrTool([]);
    arrTool.append(key: String)  // 添加
    arrTool.remove(index: Number, deleteNum: Number)  // 删除

        `
      }
    }
  },
  computed: {
    computedIndex() {
      if (this.tabArr && this.tabArr.length > 0) {
        return this.tabArr[this.tabArr.length - 1]
      }
      return '1'
    }
  },
  methods: {
    addTab() {
      this.arrTool.append(ZY.rid(3))
    },
    rmLastTab() {
      this.arrTool.remove(-1)
    },
    delTab(v) {
      // console.log(v)
      this.arrTool.delByValye(v)
    }
  },
  setup() {
    let arrTool = useArrTool([])

    return {
      arrTool
    }
  }
}
</script>
